import React, { useEffect, useState } from "react";
import { Card, Form, Select, Input, Button, Table } from "antd";
import { SearchOutlined } from "@ant-design/icons";
import { useNavigate } from "react-router-dom";
import { findByDictCode, findByParentId } from "@/api/cmn/dict";
import { getPageList } from "@/api/hosp/hospital";

import "./index.less";

const { Option } = Select;

function Hospital() {
	const navigate = useNavigate();

	const [province, setProvince] = useState([]);
	const [city, setCity] = useState([]);
	const [district, setDistrict] = useState([]);
	const [form] = Form.useForm();

	const [page] = useState(1);
	const [limit] = useState(10);
	const [total, setTotal] = useState(0);
	const [hospitalList, setHospitalList] = useState([]);

	const getHospitalList = async (searchObj: any) => {
		const data = await getPageList(page, limit, searchObj);
		setHospitalList(data.content);
		setTotal(data.totalElements);
	};

	useEffect(() => {
		const getProvince = async () => {
			const data = await findByDictCode("Province");
			setProvince(data);
		};
		getProvince();

		getHospitalList({});
	}, []);

	const clear = async () => {
		form.resetFields();
		getHospitalList({});
	};

	const onFinish = (values: any) => {
		getHospitalList(values);
	};
	const handleProvinceChange = async (value: any) => {
		const data = await findByParentId(value);
		setCity(data);
	};
	const handleCityChange = async (value: any) => {
		const data = await findByParentId(value);
		setDistrict(data);
	};

	const columns = [
		{
			title: "序号",
			key: "index",
			render: (_a: any, _b: any, index: number) => {
				return index + 1;
			},
		},
		{
			title: "医院logo",
			dataIndex: "logoData",
			key: "logoData",
			render: (logo: string) => (
				<img
					className="hospital-img"
					src={"data:image/jpeg;base64," + logo}
					alt="logo"
				/>
			),
		},
		{ title: "医院名称", dataIndex: "hosname", key: "hosname" },

		{
			title: "等级",
			key: "hostypeString",
			render: (row: any) => row.param.hostypeString,
		},
		{
			title: "详细地址",
			key: "fullAddress",
			render: (row: any) => row.param.fullAddress,
		},
		{
			title: "状态",
			dataIndex: "status",
			render: (status: number) => (status ? "已上线" : "未上线"),
			key: "status",
		},
		{
			title: "创建时间",
			dataIndex: "createTime",
			key: "createTime",
		},
		{
			title: "操作",
			key: "operator",
			width: 250,
			render: (row: any) => {
				return (
					<>
						<Button
							type="primary"
							className="hospital-btn"
							onClick={() => navigate(`/hosp/hospital/show/${row.id}`)}
						>
							查看
						</Button>
						<Button
							type="primary"
							className="hospital-btn"
							onClick={() => navigate(`/hosp/hospital/schedule/${row.hoscode}`)}
						>
							排班
						</Button>
						<Button type="primary" danger disabled>
							上线
						</Button>
					</>
				);
			},
		},
	];

	return (
		<Card>
			<Form layout="inline" onFinish={onFinish} form={form}>
				<Form.Item name="provinceCode">
					<Select
						style={{ width: 200 }}
						onChange={handleProvinceChange}
						placeholder="请选择省"
					>
						{province.map((item: any) => {
							return (
								<Option value={item.id} key={item.id}>
									{item.name}
								</Option>
							);
						})}
					</Select>
				</Form.Item>

				<Form.Item name="cityCode">
					<Select
						style={{ width: 200 }}
						onChange={handleCityChange}
						placeholder="请选择市"
					>
						{city.map((item: any) => {
							return (
								<Option value={item.id} key={item.id}>
									{item.name}
								</Option>
							);
						})}
					</Select>
				</Form.Item>

				<Form.Item name="districtCode">
					<Select style={{ width: 200 }} placeholder="请选择区">
						{district.map((item: any) => {
							return (
								<Option value={item.id} key={item.id}>
									{item.name}
								</Option>
							);
						})}
					</Select>
				</Form.Item>

				<Form.Item name="hosname">
					<Input placeholder="医院名称" />
				</Form.Item>

				<Form.Item>
					<Button
						type="primary"
						htmlType="submit"
						icon={<SearchOutlined />}
						style={{ marginRight: 10 }}
					>
						查询
					</Button>
					<Button onClick={clear}>清空</Button>
				</Form.Item>
			</Form>

			<Table
				className="hospital-table"
				columns={columns}
				dataSource={hospitalList}
				bordered
				rowKey="id"
				pagination={{
					current: page,
					pageSize: limit,
					total,
					showQuickJumper: true,
					showSizeChanger: true,
					showTotal: (total) => `总共 ${total} 条`,
				}}
			/>
		</Card>
	);
}

export default Hospital;
